<template>
  <div class="top-menu">
    <el-header>
      <div class="menu"><i class="el-icon-phone-outline"></i> 客服管理系统</div>
      <!--<div class="notice">你好 [ {{$store.state.user.serviceName}} ]</div>-->

      <div style="text-align: right">
        <el-dropdown class="notice" @command="handleCommand">
          <span class="el-dropdown-link">
            {{$store.state.user.serviceName}} <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="me">我的主页</el-dropdown-item>
            <el-dropdown-item command="out" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </el-header>
  </div>
</template>

<script>
  export default {
    name: 'TopMenu',
    data () {
      return {
        options: [
          { value: '退出登录', label: '0' }
        ],
        value: ''
      }
    },
    created() {
      this.updateUserInfo();
    },
    methods: {
      handleCommand(command) {
        switch (command) {
          case 'me': {
            this.$router.push('/me');
            break;
          }
          case 'out': {
            this.logout();
            break;
          }
          default: {
            this.$message('click on item ' + command);
          }
        }
      },

      async logout() {
        let data = await this.$$delete('/security/login');
        if (this.checkResponse(data)) {
//          this.$store.state.user.id = '';
//          this.$store.state.user.serviceId = '';
//          this.$store.state.user.serviceName = '';
//          this.$store.state.user.memo = '';
          this.$router.push('/login');
          this.$message('退出登录成功');
        }
      },

      async updateUserInfo() {
        let updateUserInfo2 = this.updateUserInfo2;
        let data = await this.$$get('/security/login/session');
        if (this.checkResponse(data)) {
          updateUserInfo2(data.data.data);
        }
      },
      updateUserInfo2(data) {
        this.$store.state.user.id = data.id;
        this.$store.state.user.serviceId = data.serviceId;
        this.$store.state.user.serviceName = data.serviceName;
        this.$store.state.user.memo = data.memo;
        this.$store.state.user.grade = data.grade;
      }
    }
  }
</script>

<style lang="less" scoped>
  .top-menu {
    background-color: #545c64;
    height: 5vh;

    .menu {
      position: absolute;
      color: #ffd04b;
      font-size: large;
      margin-top: 1vh;
      margin-left: 20px;
    }

    .notice {
      margin-top: 10px;
      color: #ffd04b;
    }
  }
</style>
